<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令函数简写</title>
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/VUE/vue2.js"></script>
</head>
<body>
<div id="box">
    <label>
        <input v-focus type="text">
    </label>

    <div v-color="'skyblue'">skyblue</div>
    <div v-color="whichColor">whichColor</div>

</div>
<script>

    Vue.directive('focus', {
        inserted(el, binding) {
            // 聚焦元素
            el.focus()
            console.log("inserted", el, binding)
        },
    })


    // 在很多时候，你可能想在 bind 和 update (创建或者更新)时触发相同行为，而不关心其它的钩子。比如这样写：
    // Vue.directive('color-swatch', function (el, binding) {
    //     el.style.backgroundColor = binding.value
    // })
    Vue.directive("color", (el,binding)=>{
        el.style.background = binding.value
        // inserted(el, binding) {
        //     console.log(el, binding)
        //     el.style.background = binding.value
        // },
        //
        // update(el, binding) {
        //     el.style.background = binding.value
        // }
    })

    let vm = new Vue({
        el: "#box",
        data: {
            whichColor: "orange"
        }
    })
</script>
</body>
</html>